{% extends "xadmin/base_site.html" %}
{% load i18n %}
{% load url from future %}
{% load xadmin_tags %}
{% load crispy_forms_tags %}

{% block breadcrumbs %}
{% if account_view %}
<ul class="breadcrumb">
  <link href="/websys/static/xadmin/vendor/bootstrap-table/css/bootstrap-table.min.css" type="text/css" media="screen" rel="stylesheet" />
<li><a href="{% url 'xadmin:index' %}">{% trans 'Home' %}</a></li>
  <li class="active">{% trans '在线统计' %}</li>
</ul>
{% else %}
<ul class="breadcrumb">
  <li><a href="{% url 'xadmin:index' %}">{% trans 'Home' %}</a></li>
  <li>
    {% if has_view_permission %}
    <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
    {% else %}{{ opts.verbose_name_plural|capfirst }}{% endif %}
  </li>
  <li><a href="{% url opts|admin_urlname:'change' original.pk %}">{{ original|truncatewords:"18" }}</a></li>
  <li class="active">{% trans 'Change password' %}</li>
</ul>
{% endif %}
{% endblock %}

{% block content-nav %}
{% endblock %}
{% block content %}
<!--页面设计在这儿....{{ serverval }}-->
    <style>
    .tb_tr{height: 40px; border:gainsboro 1px  double;}
    .tb_td{height: 50px; border: gainsboro 1px double; width:80px;}
    .img-rounded{width: 25%;}

    .tabs { width: 100%; }
.tabs ul { padding: 0; font-size: 0;}
.tabs ul li { display: inline-block; margin-right: 10px; _display: inline; _zoom: 1;}
.tabs ul a { display: inline-block; padding: 15px 30px; border-bottom: 4px solid #e5e5e5; font-size: 14px; color: #aaa; background-color: #ccc; text-decoration: none;}
.tabs ul .active a { border-bottom-color: #68a697; color: #fff; background-color: #a0cac0;}
.tabs div { height: auto; margin-top: 1px; line-height: 20px; text-align: center; background-color: #f8f8f8;}
    #table_report td{width: 30%;}
    </style>
    <table style="width: 100%">

    <tr class="tb_tr">
            <td class="tb_td"><input type="checkbox" id="cb_auto" title="自动" onclick="toAuto(this.checked)">自动</td>
            <td><label id="la_link"> {{links}}</label>&nbsp;&nbsp;<input type="button" id="bt_copy" value="刷新" onclick="autoFun()">
                <span id="s_sum" style="margin-left: 10px;"></span>
            </td>
        </tr>
    <tr class="tb_tr" id="tr_year" style="display: none;">
            <td class="tb_td">大厅：</td>
            <td>
                <span id="s_hall"></span>
            </td>
        </tr>
        <tr class="tb_tr" id="tr_month"  style="display: none;">
            <td class="tb_td">游戏：</td>
            <td>
                <span id="s_game"></span>
            </td>
        </tr>

    </table>
<!-- Demo -->
		<div class="tabs" id="div_1">
			<ul id="ul_1">
				<!--li id="li_0" title="大厅"><a href="#tab-1" id="li_a_0">大厅</a></li-->
                {% for item in htmldata %}
				    <li id="li_{{ item.id }}" title="{{ item.gamename }}"><a href="#tab-1" id="li_a_{{ item.id }}">{{ item.gamename }}</a></li>
                {% endfor %}
				<!--li id="li_3"><a href="#tab-1" >Tab 3</a></li-->
			</ul>

			<div id="tab-1">
                <table data-toggle="table" data-height="100%"  data-pagination="true" id="table_report" style="height: 100%;width: 100%">

                </table>
            </div>

		</div>
		<!-- Demo end -->

<script src="/websys/static/js/jquery.min.js"></script>
<script src="/websys/static/js/jquery.tabslet.min.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-table/js/bootstrap-table-locale-all.min.js"></script>
    <script>
    var cur_tab_id=1;
    $(function () {
        getCount();
        setDataList();
        setTab();
        //toSearch();
        //$('#li_1').click();
    });

    function getSelectedTabId() {

    $tabIndex = $( ".tabs" ).tabslet( "option", "active" );//$tabs.tabs('option', 'selected');

    var $selected = $(".tabs ul>li a").eq($tabIndex).attr('href');

    return $selected;
}
    function ShowTheObject(obj){
  var des = "";
    for(var name in obj){
    des += name + ":" + obj[name] + ";";
     }
  dump(name);
}
    //tab设置
    function setTab()
    {
{#        $('.tabs').tabslet({#}
{#            active: 1#}
{#        });#}
        $('.tabs').tabslet().on({
            '_before': function(event){
                //var active = $(this).attribute;
                var obj = event.target;//alert(obj.id)
                //console.log(event.target.id);
                //console.log(event.currentTarget);
                //alert(obj.id);
                //alert('before--'+obj.id);
            },
            '_after': function(event){
                var obj = event.target;
                //alert('after--'+obj.id);
                //$('#tab-1').html($('#tab-1').html()+obj.id);
                cur_tab_id=obj.id.replace('li_','');
                setDataList();
            }
        });
    }
    //获取人数
    function getCount()
    {
        $.get('/xadmin/report/onlinecount/', {}, function(result){
            //alert(result.ret);
			if(result.ret == 0)
			{
                var t_sum=0;
                for(var i in result.data){//用javascript的for/in循环遍历对象的属性
                    //temp += i+":"+obj[i]+"\n";
                    var t_num=result.data[i];
                    $('#li_a_'+i).html($('#li_'+i).attr('title')+'('+t_num+')');
                    t_sum+=parseInt(t_num);
                }
                $('#s_sum').html('总人数：'+t_sum);
			}else
			{
				//alert(result.msg + "("+result.ret +")")
			}
		 }, "json")
    }

    function setDataList()
    {
        var turl='/xadmin/report/onlinelist/?id='+cur_tab_id
        $('#table_report').bootstrapTable('destroy'); // 显示之前，先把当前表格销毁
        $('#table_report').bootstrapTable({
            //search: true,
            locale:'zh-CN',//中文支持
            sortable: true,      //是否启用排序
            //showFooter:true,
            sortName:'date',
            //showRefresh: true,
            pagination: false,//是否开启分页（*）
            method: "get",         // 经过测试，只有post方法能发给后端的helloWorld.do
            //exportDataType: "basic",              //basic', 'all', 'selected'.
            queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
　　// 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
            queryParams: function (params) {
                return {

                }
            },

            url:turl,   // 发送到后端helloWorld.do，由helloWorld.do返回json字符串，
                                    // 必须是列表形式，例如：[{"name":"aaa","id":"kkk"},{...},...]
            columns:[{              // 定义过滤的字符串，只有columns里写的才显示，其它不显示
                field: 'nickname',        // 这里是需要显示的字段的key,也就是helloWorld.do返回json字符串
                                    // 中必须有这个key,以及对应的value
                title: '呢称',         // 在页面显示的该列的标题信息
                //footerFormatter:'合计'
              },/*
              {
                field: 'nickname',
                title: '头像',
              },*/
                    {
                field: 'head_img',
                title: '头像',
                formatter: function(value,row,index){
                                    return '<img  src="'+value+'" class="img-rounded" >';
                                }
              },
                {
                    field: 'gamepoint',
                    title: '钻石',

                },
                {
                    field: 'roomid',
                    title: '房号',

                }
            ],

        });
    }
    //自动
    var timeoutProcess =null;
    function toAuto(val)
    {
        //alert(val);
        if(val)
        {
            timeoutProcess = setInterval( autoFun , 10000 );
        }
        else
        {
            if(timeoutProcess)
            {
                clearTimeout(timeoutProcess);
            }
        }
    }
    function autoFun()
    {
        getCount();
        setDataList();
    }
    //刷新
    function toSearch()
    {
        $.get('/xadmin/report/onlinedata/', {"id":0}, function(result){
            //alert(result.ret);
			if(result.ret == 0)
			{
					//console.log($(id).attr('serverip'))
					$('#s_hall').html(result.data.hall);
                $('#s_game').html(result.data.game);
			}else
			{
				//alert(result.msg + "("+result.ret +")")
			}
		 }, "json")
    }
    </script>
{% endblock %}